<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线视频课堂</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f4f4f4;
        }
        .title {
            position: relative;
            overflow: hidden;
            white-space: nowrap;
        }
        .title h2 {
            width: 100%;
            height: 75px;
            text-align: center;
        }
        .container {
            display: flex;
            width: 80%;
            max-width: 1200px;
        }
        .video-player {
            flex: 3;
            /* padding: 20px; */
            background-color: #333;
            color: white;
            
        }
        .videoPlayer {
            background-color: #27b080;
        }
        video {
            width: 100%;
            height: 500px;
            border: none;
        }
        .chat {
            flex: 1;
            padding-left: 20px;
            background-color: #f4f4f4;
            border-left: 1px solid #ccc;
        }
        .chat-input {
            display: flex;
            align-items: center;
            margin-top: 10px;
        }
        .chat-input textarea {
            flex: 1;
            padding: 10px;
            margin-right: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
            resize: none;
        }
        .chat-input button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .chat-input button:hover {
            background-color: #45a049;
        }
        .chat-messages {
            height: 420px;
            overflow-y: auto;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            padding: 10px;
            background-color: white;
        }
        .qiandao {
          background-image: url('qiandao.png'); /* 设置图片路径 */
          background-size: cover; /* 背景图片覆盖整个按钮 */
          background-repeat: no-repeat; /* 不重复背景图片 */
          border: none; /* 移除边框 */
          color: white; /* 设置文字颜色 */
          padding: 10px 20px; /* 设置内边距 */
          text-align: center; /* 文字居中对齐 */
          text-decoration: none; /* 移除文本装饰 */
          display: inline-block; /* 设置为内联块级元素 */
          font-size: 16px; /* 设置文字大小 */
          margin: 4px 2px; /* 设置外边距 */
          cursor: pointer; /* 设置鼠标光标为指针形状 */
        }
      
        .qiandao:hover {
          background-color: #555; /* 鼠标悬停时的背景颜色 */
        }
    </style>
</head>
<body>

    <!-- <div class="title">
        <h2>在线课堂</h2>
    </div> -->
    
    <div class="container">
        <div class="video-player">
            <video id="videoPlayer" class="videoPlayer" controls autoplay>
                <source src="teacher1.mp4" type="video/mp4">
                您的浏览器不支持HTML5视频播放器。
            </video>
            <div class="controls">
                <button onclick="playVideo()">播放</button>
                <button onclick="stopVideo()">停止</button>
                <button onclick="pauseVideo()">暂停</button>
                <button onclick="continueVideo()">继续</button>
                <a style="color:#45a049;margin-left: 100px;" href="#">思维导图</a>
            </div>
            
        </div>
        <div class="chat">
            <div class="chat-messages" id="chatMessages"></div>
            <button >签到</button>
            <button onclick="handQuestion()">举手</button>
            <button id="btnStart" >开启语音</button>
            <button id="btnStop" style="display: none;">语音停止</button>
            <input type="hidden" id="sessionid" value="0">
            <input type="hidden" id="asr_mode" value="2pass" />
            <input type="hidden" id="wssip" value="wss://127.0.0.1:10095/" />
            <div class="chat-input">
                <textarea id="chatMessage" placeholder="输入聊天消息..."></textarea>
                <button id="sendMsg">发送消息</button>
            </div>
        </div>
    </div>

</body>
<script src="srs.sdk.js"></script>
<script type="text/javascript" src="http://cdn.sockjs.org/sockjs-0.3.4.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js"></script>

<!--funasr语音识别-->
<script type="text/javascript" src="static/mpegts-1.7.3.min.js"></script>
<script type="text/javascript" src="http://cdn.sockjs.org/sockjs-0.3.4.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="static/recorder-core.js" charset="UTF-8"></script>
<script src="static/wav.js" charset="UTF-8"></script>
<script src="static/pcm.js" charset="UTF-8"></script>
<script src="static/ws_connect.js" charset="utf-8"></script>
<!-- <script src="static/ketang-test.js" charset="utf-8"></script> -->

<script>
  var sdk = null; // Global handler to do cleanup when republishing.
  var is_sdk_player = false;
  var is_pause = false;
  $(document).ready(function() {

  })

  function playVideo() {
      const video = document.getElementById('videoPlayer');
      // $('#videoPlayer').prop('srcObject', "teacher1.mp4");
      // video.src = "teacher1.mp4";
      video.play();
  }

  var currentTimeVedio = 0;
  function pauseVideo() {
      const video = document.getElementById('videoPlayer');
      video.pause();
      currentTimeVedio = video.currentTime
      console.log("currentTimeVedio:"+currentTimeVedio)
      is_pause = true;
  }
  function switchVedio(path){
    const video = document.getElementById('videoPlayer');
    video.src = path;
    video.play();
  }

  function handQuestion(){
    // 需要一个过度视频，学生你好，你需要什么帮助呢
    pauseVideo()
    switchVedio("teacher2.mp4")
    if(!is_sdk_player){
      startPlay()
    }
  }
  function continueVideo() {
    if(is_pause){
      const video = document.getElementById('videoPlayer');
      video.currentTime = currentTimeVedio;
      console.log("continueVideo.src="+video.src);
      console.log("continueVideo.srcObject="+video.srcObject);
      // video.src = "teacher1.mp4";
      // $('#videoPlayer').prop('srcObject', "teacher1.mp4");
      video.play();
      is_pause=false;
      is_sdk_player=false;
      // sdk.close();
    }
  }
  function stopVideo() {
      const video = document.getElementById('videoPlayer');
      video.pause();
      video.currentTime = 0;
  }

  function sendMessage() {
      const message = document.getElementById('chatMessage').value;
      const messages = document.getElementById('chatMessages');
      const newMessage = document.createElement('div');
      newMessage.textContent = "YOU:"+message;
      messages.appendChild(newMessage);
      document.getElementById('chatMessage').value = ''; // 清空输入框
      console.log('Sending: ' + message);
      fetch('/human', {
            body: JSON.stringify({
                text: message,
                type: 'echo',
            }),
            headers: {
                'Content-Type': 'application/json'
            },
            method: 'POST'
      }).then(response=>{
        console.log('响应',response)
        if (!response.ok) {
          throw new Error('Network response was not ok ' + response.statusText);
        }
        return response.json(); // 转换为JSON
      }).then(data => {
        console.log("AI:"+data.data); // 处理JSON数据
        
        // messages.appendChild(data.data);
        const newMessage2 = document.createElement('div');
        newMessage2.textContent = "AI:  "+data.data;
        messages.appendChild(newMessage2);
        if(!is_sdk_player){
          pauseVideo();
          startPlay();
          is_sdk_player=true;
        }

      }).catch(error => {
        // console.error('There has been a problem with your fetch operation:', error); // 捕获错误
      });

  }
  
  function startPlay(){
    // Close PC when user replay.
    
    if (sdk) {
        sdk.close();
    }
    sdk = new SrsRtcWhipWhepAsync();
    // User should set the stream when publish is done, @see https://webrtc.org/getting-started/media-devices
    // However SRS SDK provides a consist API like https://webrtc.org/getting-started/remote-streams
    $('#videoPlayer').prop('srcObject', sdk.stream);
    // Optional callback, SDK will add track to stream.
    // sdk.ontrack = function (event) { console.log('Got track', event); sdk.stream.addTrack(event.track); };
    var host = window.location.hostname
    // For example: webrtc://r.ossrs.net/live/livestream
    var url = "http://"+host+":1985/rtc/v1/whep/?app=live&stream=livestream"
    sdk.play(url).then(function(session){
        console.log("session:"+session.sessionid)
        //$('#sessionid').html(session.sessionid);
        //$('#simulator-drop').attr('href', session.simulator + '?drop=1&username=' + session.sessionid);
    }).catch(function (reason) {
        sdk.close();
        // $('#videoPlayer').hide();
        console.error(reason);
    });

  }
    

</script>


</html>